<template>
	<view style="padding: 0 20rpx;margin-bottom: 170rpx;">
		<view class="xxl mt20">
			<template v-if="!is_not_return">
				待确认
			</template>
			<template v-else>
				已超期 | 未归还
			</template>
		</view>
		<view class="mt20 row">
			订单号：{{info.order_sn}}
			<image @tap="toCopy(info.order_sn)" src="../../static/images/copy_icon_white.png" style="width: 30rpx;"
				mode="widthFix">
			</image>
		</view>
		<view class="card">
			<view class="row" style="gap: 20rpx;">
				<u-image :src="info.avatar" shape="circle" border-radius="20" mode="aspectFill" width="120"
					height="120"></u-image>
				<view class="flex1 column-center" style="gap: 20rpx;align-items: start;">
					<view>
						{{info.name}}
					</view>
					<view class="row">
						<image src="../../../static/images/icon_7.png" mode="widthFix" style="width: 30rpx;">
						</image>
						<text class="ml10 mr20 lighter">{{info.mobile}}</text>
						<image src="../../../static/images/icon_6.png" mode="widthFix" style="width: 40rpx;"
							@tap="callPhone(info.mobile)">
						</image>
					</view>
				</view>
			</view>
			<view class="mt20" style="padding: 20rpx;background-color: #f5f9fa;">
				<view class="row-between lighter">
					<view class="row">
						产品：<text style="color: #dc503f;">{{info.goods_name}}</text>
					</view>
					<view class="row">
						租期共：{{info.goods_info}}
					</view>
				</view>
				<view class="row xs mt20 muted">
					下单时间：
					<text>{{info.create_time}}</text>
				</view>
				<view class="row xs mt20 muted">
					归还时间：
					<text>{{info.end_time}}</text>
				</view>
			</view>
			<view class="mt30 mb30" style="width: 100%;height: 2rpx;background-color: #eee;"></view>
			<template v-if="!is_not_return">
				<view class="xxl">
					归还详情
				</view>
				<view class="mt20 row-between wrap">
					<view style="width: 200rpx;" class="mb20">
						<video :src="info.user_goods.abs_video" style="width: 200rpx;height: 200rpx" controls></video>
						<view class="mt10" style="text-align: center;">产品使用视频</view>
					</view>
					<view v-for="(item,index) in info.user_goods.abs_image" :key="index" class="mb20"
						style="width: 200rpx;">
						<u-image width="200rpx" height="200rpx" @click="currSrc = item.image;maskShow=true"
							mode="aspectFill" :src="item.image"></u-image>
						<view class="mt10" style="text-align: center;">{{numberList[index]}}</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="row-center" style="height: 400rpx;">
					请及时联系客户询问原因
				</view>
			</template>
		</view>
		<view class="footer" v-if="!is_not_return">
			<u-button shape="circle" @click="popupShow=true">拒绝</u-button>
			<u-button shape="circle" type="error" class="flex1" :custom-style="{'backgroundColor':'#dc503f'}"
				@click="toConfirm(1)">确认归还</u-button>
		</view>
		<u-mask :show="maskShow" @click="maskShow = false;" :custom-style="{'display':'flex','align-items':'center'}">
			<u-image :src="currSrc" mode="widthFix" style="width:100%"></u-image>
		</u-mask>
		<u-popup v-model="popupShow" mode="center" width="90%" :border-radius="20">
			<view class="bg-white" style="padding:30rpx 20rpx">
				<view class="row-center xl black mb20">
					请编辑拒绝原因
				</view>
				<u-input v-model="refuseReason"
					:custom-style="{'backgroundColor':'#f4f6fa','padding':'20rpx','borderRadius':'20rpx','marginBottom':'20rpx'}"
					type="textarea" height="300" />
				<u-button shape="circle" type="error" :custom-style="{'backgroundColor':'#dc503f'}"
					@click="toConfirm(2)">提交</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		copy,
		uploadFile
	} from '../../../utils/tools';
	import {
		getConfirmStone,
		postConfirmStone
	} from '../../../api/user';
	const numberList = [
		'产品全图',
		'产品正面图',
		'产品背面图',
		'产品左侧图',
		'产品右侧图',
	]
	export default {
		data() {
			return {
				numberList: numberList,
				info: null,
				id: 0,
				maskShow: false,
				currSrc: null,
				popupShow: false,
				refuseReason: '',
				is_not_return: false,
			};
		},
		onLoad(options) {
			const id = options.id;
			this.id = id;
			// const lat = uni.getStorageSync("City_lat");
			// const lng = uni.getStorageSync("City_lng");
			getConfirmStone({
				id,
				// lng,
				// lat
			}).then(res => {
				if (res.code !== 1) return this.$toast({
					title: res.msg
				});
				this.info = res.data;
				if (res.data.countdown.status == 2) {
					this.is_not_return = true;
				}
			})
		},
		methods: {
			toCopy(text) {
				copy(text)
			},
			callPhone(val) {
				uni.makePhoneCall({
					phoneNumber: val
				})
			},
			toConfirm(type) {
				if (type == 2 && !this.refuseReason) return this.$toast({
					title: '请输入拒绝原因'
				});
				postConfirmStone({
					id: this.id,
					status: type,
					beizhu: this.refuseReason,
				}).then(res => {
					if (res.code !== 1) return this.$toast({
						title: res.msg
					})
					uni.$emit('reload-list')
					this.$toast({
						title: '提交成功'
					}, {
						tab: 3,
						url: 1
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #dc503f;
		color: white;

		.card {
			border-radius: 14rpx;
			background-color: white;
			color: #333;
			padding: 20rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
		}

		.footer {
			position: fixed;
			bottom: 0%;
			width: 100%;
			left: 0;
			background-color: white;
			display: flex;
			gap: 20rpx;
			padding: 20rpx 20rpx env(safe-area-inset-bottom);
		}
	}
</style>